<template>
  <div>
    <div class="tab">
      <ul>
        <li>
          <router-link to="/paylist" v-bind:style="{color:color1,borderBottom:borderBottom1}">未缴费记录</router-link>
        </li>
        <li>
          <router-link to="/paylist/unit" v-bind:style="{color:color1,borderBottom:borderBottom2}">单元历史</router-link>
        </li>
        <li>
          <router-link to="/paylist/personal" v-bind:style="{color:color1,borderBottom:borderBottom3}">个人历史</router-link>
        </li>
      </ul>
    </div>
    <div class="marquee">
      <p class="bg"><i></i></p>
         <div class="get-marquee-width">
             <div class="marquee-move">
             <span class="latest">{{content}}</span>
            </div>
           </div>
    </div>
    <div class="listWarp">
      <div class="paylist" v-for="list in lists">
        <ul>
          <li data-id="list.id">
            <div class="divTop clearfix">
              <em class="num">{{list.num}}</em>
              <span class="unitNum">{{list.areaName + list.ridgepoleName + list.objName}}</span>
              <span class="payAleady">已缴费</span>
            </div>
            <div class="divMiddle clearfix">
              <div class="electricity clearfix">
                <div><img src="../../assets/images/money.png" width="100%"/></div>
                <p class="eleNum">{{list.efee}}<em>(电)</em></p>
              </div>
              <div class="water clearfix">
                <div><img src="images/b_money.png" width="100%"/></div>
                <p class="waterNum">{{list.wfee}}<em>(水)</em></p>
              </div>
              <div class="sumDiv clearfix">
                <p class="rightp">
                  <em class="addnum">总计</em>
                  <span class="sum">{{list.allfee}}</span>
                </p>
              </div>
            </div>
            <div class="divBottom clearfix">
              <em class="timeImg"><img src="images/time.png" width="100%"/></em>
              <span class="timeStar">{{list.starMonth}}</span>
              至
              <span class="timeEnd">{{list.endMonth}}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <h6 class="loadtip" @click="load">{{msg}}</h6>
  </div>
</template>

<script>
    export default {
        data:function () {
          return {
            lists:[],
            page:'',
            color1:'#303030',
            color2:'#303030',
            color3:'#303030',
            borderBottom1:'',
            borderBottom2:'',
            borderBottom3:'',
            areaType:'',
            area:'',
            ridgepole:'',
            objId:'',
            state:'',
            feePerson:'',
            msg:'点击加载更多',
            content:''
        }
      },
      methods:{
        load:function () {
          this.msg="加载中...";
          this.page=this.page+1;
          var load=this.$layer.loading(2);
          this.$http.post("http://192.168.10.53:8068/WefService/mif/mFeeRecord_queryListByUnit.do?",{page:this.page,areaType:this.areaType,areaType:this.areaType,area:this.area,ridgepole:this.ridgepole,objId:this.objId,feePerson:this.feePerson},{emulateJSON:true,credentials: true}).then(
            function (res) {
              //成功
              console.log(res);
              this.$layer.close(load);
              try{
                var resdata = JSON.parse(res.bodyText);
                if(resdata.status == 1){
                  this.msg="加载完成";
                  for(var i=0;i<resdata.data.length;i++){
                    this.lists.push(resdata.data[i]);
                  }
                  this.msg="加载更多...";
                }
                if(resdata.status==3){
                  this.msg="没有更多数据";
                }
                if(resdata.status==0){
                  this.$layer.msg(resdata.message,{time:1});
                }
              }catch(e){

              }

            },function (res) {
              // 处理失败的结果
              this.$layer.close(load);
            }
          );
        },
        marquee:function () {
          this.$http.get("http://192.168.10.53:8068/WefService/mif/mNoticeInfo_queryLatelyInfo.do",{},{emulateJSON:true,credentials:true}).then(
            function (res) {
              var resdata=JSON.parse(res.bodyText);
              if(resdata.status==1){
                 this.content=resdata.data.content;
              }
            }
          )
        },
        tab:function () {
          var item = this.$route.name;
          if(item=="paylist"){
            this.color1="#178cf9";
            this.color2="#303030";
            this.color3="#303030";
            this.borderBottom1="#178cf9";
            this.borderBottom2="#303030";
            this.borderBottom3="#303030";
            this.page=1;
            var load = this.$layer.loading(2);
            this.$http.post("http://192.168.10.53:8068/WefService/mif/mFeeRecord_queryListByUnit.do?",{},{emulateJSON:true,credentials:true}).then(
              function (res) {
                this.$layer.close(load);
                try{
                  var resdata=JSON.parse(res.bodyText);
                  if(resdata.status==1){
                    this.lists=resdata.data;
                  }
                  if(resdata.status==0){
                    this.$layer.msg(resdata.message,{time:1});
                  }
                }catch(e){}
              },
              function (res) {
                this.$layer.close(load);
              }
            );
          }
          if(item=="paylist_unit"){
            this.color1="#303030";
            this.color2="#178cf9";
            this.color3="#303030";
            this.borderBottom1="#303030";
            this.borderBottom2="#178cf9";
            this.borderBottom3="#303030";
            var load=this.$layer.loading(2);
            this.page=1;
            this.$http.post("http://192.168.10.53:8068/WefService/mif/mFeeRecord_queryListByUnit.do?",{},{emulateJSON:true,credentials:true}).then(
              function (res) {
                this.$layer.close(load);
                try{
                  var resdata=JSON.parse(res.bodyText);
                  if(resdata.status==1){
                    this.lists=resdata.data;
                  }
                  if(resdata.status==0){
                    this.$layer.msg(resdata.message,{time:1});
                  }
                }catch(e){}
              },
              function (res) {
                this.$layer.close(load);
              }
            );
          }
          if(item=="paylist_person"){
            this.color1="#303030";
            this.color2="#303030";
            this.color3="#178cf9";
            this.borderBottom1="#303030";
            this.borderBottom2="#303030";
            this.borderBottom3="#178cf9";
            var load=this.$layer.loading(2);
            this.$http.post("http://192.168.10.53:8068/WefService/mif/mFeeRecord_queryListByUnit.do?",{},{emulateJSON:true,credentials:true}).then(
              function (res) {
                this.$layer.close(load);
                try{
                  var resdata=JSON.parse(res.bodyText);
                  if(resdata.status==1){
                    this.lists=resdata.data;
                  }
                  if(resdata.status==0){
                    this.$layer.msg(resdata.message,{time:1});
                  }
                }catch (e){}
              },
              function (res) {
                this.$layer.close(load);
              }
            );
          }
        }
      },
      mounted:function () {
        this.tab();
      },
      watch:{
          "$route":"tab"
      }
    }
</script>

<style scoped>
  .tab {
    font-family: "microsoft yahei";
    width: 100%;
    height: .55rem;
    line-height: .55rem;
    text-align: center;
    font-size: .16rem;
    background: #fff;
    color: #181818;
    position: fixed;
    top: .55rem;
    left: 0;
    z-index: 1;
  }
  .tab li{
    float: left;
    line-height: .55rem;
    width: 33%;
    text-align: center;
  }
  .tab li a{
    display: inline-block;
  }
  .marquee {
    position: fixed;
    top: 1.1rem;
    width: 100%;
    text-indent: .25rem;
    overflow: hidden;
    height: .35rem;
    line-height: .35rem;
    background-color: #fff8e5;
    border: 1px solid #ffe4af;
    z-index: 100;
  }
  .marquee .bg {
    position: absolute;
    width: .35rem;
    height: .35rem;
    background-color: #FFF8E5;
    z-index: 1;
  }
  .marquee i {
    display: inline-block;
    background: url(../../assets/images/ad_red.png) left center no-repeat;
    background-size: .18rem auto;
    width: .18rem;
    height: .18rem;
    position: absolute;
    left: .12rem;
    top: .08rem;
    z-index: 2;
  }
</style>
